<template>
  <div>
    <custom name="图标" bg-color="bg-gradual-blue fixed"></custom>

    <div class="cu-bar bg-white search fixed" :style="CustomBar">
      <div class="search-form round">
        <text class="icon-search"></text>
        <input
          type="text"
          placeholder="搜索icon"
          confirm-type="search"
          @input="searchIcon"
        >
      </div>
    </div>
    <div class="cu-list grid col-3">
      <div class="cu-item" v-for="(item,index) in icon" :key="index">
        <text class="lg text-gray" :class="'icon-'+item.name"></text>
        <text>{{item.name}}</text>
      </div>
    </div>
  </div>
</template>

<script>
import Custom from "@/components/custom";
import { obj2style } from "@/utils/index";
export default {
  data() {
    return {
      list: [
        {
          name: "appreciate",
          isShow: true
        },
        {
          name: "check",
          isShow: true
        },
        {
          name: "close",
          isShow: true
        },
        {
          name: "edit",
          isShow: true
        },
        {
          name: "emoji",
          isShow: true
        },
        {
          name: "favorfill",
          isShow: true
        },
        {
          name: "favor",
          isShow: true
        },
        {
          name: "loading",
          isShow: true
        },
        {
          name: "locationfill",
          isShow: true
        },
        {
          name: "location",
          isShow: true
        },
        {
          name: "phone",
          isShow: true
        },
        {
          name: "roundcheckfill",
          isShow: true
        },
        {
          name: "roundcheck",
          isShow: true
        },
        {
          name: "roundclosefill",
          isShow: true
        },
        {
          name: "roundclose",
          isShow: true
        },
        {
          name: "roundrightfill",
          isShow: true
        },
        {
          name: "roundright",
          isShow: true
        },
        {
          name: "search",
          isShow: true
        },
        {
          name: "taxi",
          isShow: true
        },
        {
          name: "timefill",
          isShow: true
        },
        {
          name: "time",
          isShow: true
        },
        {
          name: "unfold",
          isShow: true
        },
        {
          name: "warnfill",
          isShow: true
        },
        {
          name: "warn",
          isShow: true
        },
        {
          name: "camerafill",
          isShow: true
        },
        {
          name: "camera",
          isShow: true
        },
        {
          name: "commentfill",
          isShow: true
        },
        {
          name: "comment",
          isShow: true
        },
        {
          name: "likefill",
          isShow: true
        },
        {
          name: "like",
          isShow: true
        },
        {
          name: "notificationfill",
          isShow: true
        },
        {
          name: "notification",
          isShow: true
        },
        {
          name: "order",
          isShow: true
        },
        {
          name: "samefill",
          isShow: true
        },
        {
          name: "same",
          isShow: true
        },
        {
          name: "deliver",
          isShow: true
        },
        {
          name: "evaluate",
          isShow: true
        },
        {
          name: "pay",
          isShow: true
        },
        {
          name: "send",
          isShow: true
        },
        {
          name: "shop",
          isShow: true
        },
        {
          name: "ticket",
          isShow: true
        },
        {
          name: "back",
          isShow: true
        },
        {
          name: "cascades",
          isShow: true
        },
        {
          name: "discover",
          isShow: true
        },
        {
          name: "list",
          isShow: true
        },
        {
          name: "more",
          isShow: true
        },
        {
          name: "scan",
          isShow: true
        },
        {
          name: "settings",
          isShow: true
        },
        {
          name: "questionfill",
          isShow: true
        },
        {
          name: "question",
          isShow: true
        },
        {
          name: "shopfill",
          isShow: true
        },
        {
          name: "form",
          isShow: true
        },
        {
          name: "pic",
          isShow: true
        },
        {
          name: "filter",
          isShow: true
        },
        {
          name: "footprint",
          isShow: true
        },
        {
          name: "top",
          isShow: true
        },
        {
          name: "pulldown",
          isShow: true
        },
        {
          name: "pullup",
          isShow: true
        },
        {
          name: "right",
          isShow: true
        },
        {
          name: "refresh",
          isShow: true
        },
        {
          name: "moreandroid",
          isShow: true
        },
        {
          name: "deletefill",
          isShow: true
        },
        {
          name: "refund",
          isShow: true
        },
        {
          name: "cart",
          isShow: true
        },
        {
          name: "qrcode",
          isShow: true
        },
        {
          name: "remind",
          isShow: true
        },
        {
          name: "delete",
          isShow: true
        },
        {
          name: "profile",
          isShow: true
        },
        {
          name: "home",
          isShow: true
        },
        {
          name: "cartfill",
          isShow: true
        },
        {
          name: "discoverfill",
          isShow: true
        },
        {
          name: "homefill",
          isShow: true
        },
        {
          name: "message",
          isShow: true
        },
        {
          name: "addressbook",
          isShow: true
        },
        {
          name: "link",
          isShow: true
        },
        {
          name: "lock",
          isShow: true
        },
        {
          name: "unlock",
          isShow: true
        },
        {
          name: "vip",
          isShow: true
        },
        {
          name: "weibo",
          isShow: true
        },
        {
          name: "activity",
          isShow: true
        },
        {
          name: "friendaddfill",
          isShow: true
        },
        {
          name: "friendadd",
          isShow: true
        },
        {
          name: "friendfamous",
          isShow: true
        },
        {
          name: "friend",
          isShow: true
        },
        {
          name: "goods",
          isShow: true
        },
        {
          name: "selection",
          isShow: true
        },
        {
          name: "explore",
          isShow: true
        },
        {
          name: "present",
          isShow: true
        },
        {
          name: "squarecheckfill",
          isShow: true
        },
        {
          name: "square",
          isShow: true
        },
        {
          name: "squarecheck",
          isShow: true
        },
        {
          name: "round",
          isShow: true
        },
        {
          name: "roundaddfill",
          isShow: true
        },
        {
          name: "roundadd",
          isShow: true
        },
        {
          name: "add",
          isShow: true
        },
        {
          name: "notificationforbidfill",
          isShow: true
        },
        {
          name: "explorefill",
          isShow: true
        },
        {
          name: "fold",
          isShow: true
        },
        {
          name: "game",
          isShow: true
        },
        {
          name: "redpacket",
          isShow: true
        },
        {
          name: "selectionfill",
          isShow: true
        },
        {
          name: "similar",
          isShow: true
        },
        {
          name: "appreciatefill",
          isShow: true
        },
        {
          name: "infofill",
          isShow: true
        },
        {
          name: "info",
          isShow: true
        },
        {
          name: "forwardfill",
          isShow: true
        },
        {
          name: "forward",
          isShow: true
        },
        {
          name: "rechargefill",
          isShow: true
        },
        {
          name: "recharge",
          isShow: true
        },
        {
          name: "vipcard",
          isShow: true
        },
        {
          name: "voice",
          isShow: true
        },
        {
          name: "voicefill",
          isShow: true
        },
        {
          name: "friendfavor",
          isShow: true
        },
        {
          name: "wifi",
          isShow: true
        },
        {
          name: "share",
          isShow: true
        },
        {
          name: "wefill",
          isShow: true
        },
        {
          name: "we",
          isShow: true
        },
        {
          name: "lightauto",
          isShow: true
        },
        {
          name: "lightforbid",
          isShow: true
        },
        {
          name: "lightfill",
          isShow: true
        },
        {
          name: "camerarotate",
          isShow: true
        },
        {
          name: "light",
          isShow: true
        },
        {
          name: "barcode",
          isShow: true
        },
        {
          name: "flashlightclose",
          isShow: true
        },
        {
          name: "flashlightopen",
          isShow: true
        },
        {
          name: "searchlist",
          isShow: true
        },
        {
          name: "service",
          isShow: true
        },
        {
          name: "sort",
          isShow: true
        },
        {
          name: "down",
          isShow: true
        },
        {
          name: "mobile",
          isShow: true
        },
        {
          name: "mobilefill",
          isShow: true
        },
        {
          name: "copy",
          isShow: true
        },
        {
          name: "countdownfill",
          isShow: true
        },
        {
          name: "countdown",
          isShow: true
        },
        {
          name: "noticefill",
          isShow: true
        },
        {
          name: "notice",
          isShow: true
        },
        {
          name: "upstagefill",
          isShow: true
        },
        {
          name: "upstage",
          isShow: true
        },
        {
          name: "babyfill",
          isShow: true
        },
        {
          name: "baby",
          isShow: true
        },
        {
          name: "brandfill",
          isShow: true
        },
        {
          name: "brand",
          isShow: true
        },
        {
          name: "choicenessfill",
          isShow: true
        },
        {
          name: "choiceness",
          isShow: true
        },
        {
          name: "clothesfill",
          isShow: true
        },
        {
          name: "clothes",
          isShow: true
        },
        {
          name: "creativefill",
          isShow: true
        },
        {
          name: "creative",
          isShow: true
        },
        {
          name: "female",
          isShow: true
        },
        {
          name: "keyboard",
          isShow: true
        },
        {
          name: "male",
          isShow: true
        },
        {
          name: "newfill",
          isShow: true
        },
        {
          name: "new",
          isShow: true
        },
        {
          name: "pullleft",
          isShow: true
        },
        {
          name: "pullright",
          isShow: true
        },
        {
          name: "rankfill",
          isShow: true
        },
        {
          name: "rank",
          isShow: true
        },
        {
          name: "bad",
          isShow: true
        },
        {
          name: "cameraadd",
          isShow: true
        },
        {
          name: "focus",
          isShow: true
        },
        {
          name: "friendfill",
          isShow: true
        },
        {
          name: "cameraaddfill",
          isShow: true
        },
        {
          name: "apps",
          isShow: true
        },
        {
          name: "paintfill",
          isShow: true
        },
        {
          name: "paint",
          isShow: true
        },
        {
          name: "picfill",
          isShow: true
        },
        {
          name: "refresharrow",
          isShow: true
        },
        {
          name: "colorlens",
          isShow: true
        },
        {
          name: "markfill",
          isShow: true
        },
        {
          name: "mark",
          isShow: true
        },
        {
          name: "presentfill",
          isShow: true
        },
        {
          name: "repeal",
          isShow: true
        },
        {
          name: "album",
          isShow: true
        },
        {
          name: "peoplefill",
          isShow: true
        },
        {
          name: "people",
          isShow: true
        },
        {
          name: "servicefill",
          isShow: true
        },
        {
          name: "repair",
          isShow: true
        },
        {
          name: "file",
          isShow: true
        },
        {
          name: "repairfill",
          isShow: true
        },
        {
          name: "taoxiaopu",
          isShow: true
        },
        {
          name: "weixin",
          isShow: true
        },
        {
          name: "attentionfill",
          isShow: true
        },
        {
          name: "attention",
          isShow: true
        },
        {
          name: "commandfill",
          isShow: true
        },
        {
          name: "command",
          isShow: true
        },
        {
          name: "communityfill",
          isShow: true
        },
        {
          name: "community",
          isShow: true
        },
        {
          name: "read",
          isShow: true
        },
        {
          name: "calendar",
          isShow: true
        },
        {
          name: "cut",
          isShow: true
        },
        {
          name: "magic",
          isShow: true
        },
        {
          name: "backwardfill",
          isShow: true
        },
        {
          name: "playfill",
          isShow: true
        },
        {
          name: "stop",
          isShow: true
        },
        {
          name: "tagfill",
          isShow: true
        },
        {
          name: "tag",
          isShow: true
        },
        {
          name: "group",
          isShow: true
        },
        {
          name: "all",
          isShow: true
        },
        {
          name: "backdelete",
          isShow: true
        },
        {
          name: "hotfill",
          isShow: true
        },
        {
          name: "hot",
          isShow: true
        },
        {
          name: "post",
          isShow: true
        },
        {
          name: "radiobox",
          isShow: true
        },
        {
          name: "rounddown",
          isShow: true
        },
        {
          name: "upload",
          isShow: true
        },
        {
          name: "writefill",
          isShow: true
        },
        {
          name: "write",
          isShow: true
        },
        {
          name: "radioboxfill",
          isShow: true
        },
        {
          name: "punch",
          isShow: true
        },
        {
          name: "shake",
          isShow: true
        },
        {
          name: "move",
          isShow: true
        },
        {
          name: "safe",
          isShow: true
        },
        {
          name: "activityfill",
          isShow: true
        },
        {
          name: "crownfill",
          isShow: true
        },
        {
          name: "crown",
          isShow: true
        },
        {
          name: "goodsfill",
          isShow: true
        },
        {
          name: "messagefill",
          isShow: true
        },
        {
          name: "profilefill",
          isShow: true
        },
        {
          name: "sound",
          isShow: true
        },
        {
          name: "sponsorfill",
          isShow: true
        },
        {
          name: "sponsor",
          isShow: true
        },
        {
          name: "upblock",
          isShow: true
        },
        {
          name: "weblock",
          isShow: true
        },
        {
          name: "weunblock",
          isShow: true
        },
        {
          name: "my",
          isShow: true
        },
        {
          name: "myfill",
          isShow: true
        },
        {
          name: "emojifill",
          isShow: true
        },
        {
          name: "emojiflashfill",
          isShow: true
        },
        {
          name: "flashbuyfill",
          isShow: true
        },
        {
          name: "text",
          isShow: true
        },
        {
          name: "goodsfavor",
          isShow: true
        },
        {
          name: "musicfill",
          isShow: true
        },
        {
          name: "musicforbidfill",
          isShow: true
        },
        {
          name: "card",
          isShow: true
        },
        {
          name: "triangledownfill",
          isShow: true
        },
        {
          name: "triangleupfill",
          isShow: true
        },
        {
          name: "roundleftfill-copy",
          isShow: true
        },
        {
          name: "font",
          isShow: true
        },
        {
          name: "title",
          isShow: true
        },
        {
          name: "recordfill",
          isShow: true
        },
        {
          name: "record",
          isShow: true
        },
        {
          name: "cardboardfill",
          isShow: true
        },
        {
          name: "cardboard",
          isShow: true
        },
        {
          name: "formfill",
          isShow: true
        },
        {
          name: "coin",
          isShow: true
        },
        {
          name: "cardboardforbid",
          isShow: true
        },
        {
          name: "circlefill",
          isShow: true
        },
        {
          name: "circle",
          isShow: true
        },
        {
          name: "attentionforbid",
          isShow: true
        },
        {
          name: "attentionforbidfill",
          isShow: true
        },
        {
          name: "attentionfavorfill",
          isShow: true
        },
        {
          name: "attentionfavor",
          isShow: true
        },
        {
          name: "titles",
          isShow: true
        },
        {
          name: "icloading",
          isShow: true
        },
        {
          name: "full",
          isShow: true
        },
        {
          name: "mail",
          isShow: true
        },
        {
          name: "peoplelist",
          isShow: true
        },
        {
          name: "goodsnewfill",
          isShow: true
        },
        {
          name: "goodsnew",
          isShow: true
        },
        {
          name: "medalfill",
          isShow: true
        },
        {
          name: "medal",
          isShow: true
        },
        {
          name: "newsfill",
          isShow: true
        },
        {
          name: "newshotfill",
          isShow: true
        },
        {
          name: "newshot",
          isShow: true
        },
        {
          name: "news",
          isShow: true
        },
        {
          name: "videofill",
          isShow: true
        },
        {
          name: "video",
          isShow: true
        },
        {
          name: "exit",
          isShow: true
        },
        {
          name: "skinfill",
          isShow: true
        },
        {
          name: "skin",
          isShow: true
        },
        {
          name: "moneybagfill",
          isShow: true
        },
        {
          name: "usefullfill",
          isShow: true
        },
        {
          name: "usefull",
          isShow: true
        },
        {
          name: "moneybag",
          isShow: true
        },
        {
          name: "redpacket_fill",
          isShow: true
        },
        {
          name: "subscription",
          isShow: true
        },
        {
          name: "loading1",
          isShow: true
        },
        {
          name: "github",
          isShow: true
        },
        {
          name: "global",
          isShow: true
        },
        {
          name: "settingsfill",
          isShow: true
        },
        {
          name: "back_android",
          isShow: true
        },
        {
          name: "expressman",
          isShow: true
        },
        {
          name: "evaluate_fill",
          isShow: true
        },
        {
          name: "group_fill",
          isShow: true
        },
        {
          name: "play_forward_fill",
          isShow: true
        },
        {
          name: "deliver_fill",
          isShow: true
        },
        {
          name: "notice_forbid_fill",
          isShow: true
        },
        {
          name: "fork",
          isShow: true
        },
        {
          name: "pick",
          isShow: true
        },
        {
          name: "wenzi",
          isShow: true
        },
        {
          name: "ellipse",
          isShow: true
        },
        {
          name: "qr_code",
          isShow: true
        },
        {
          name: "dianhua",
          isShow: true
        },
        {
          name: "icon",
          isShow: true
        },
        {
          name: "loading2",
          isShow: true
        },
        {
          name: "btn",
          isShow: true
        }
      ],
      icon: []
    };
  },

  components: { Custom },

  computed: {
    CustomBar() {
      let style = {};
      style["top"] = uni.getStorageSync("CustomBar") + "px";
      return obj2style(style);
    }
  },

  methods: {
    searchIcon(e) {
      let key = e.target.value.toLowerCase();
      this.icon = this.list.filter(item => {
        let b = item.name.toLowerCase();
        return b.search(key) !== -1;
      });
    }
  },

  mounted() {
    this.icon = this.list;
  }
};
</script>
<style lang='scss'>
page {
  padding-top: 50px;
}
item.none {
  display: none;
}
</style>
